<template>
  <div class="hello">
    <el-table :data="tableData" width="100%">
      <el-table-column label="网站名称" prop="name"></el-table-column>
      <el-table-column label="网站域名" prop="ip"></el-table-column>
      <el-table-column label="ICP备案" prop="ICP"></el-table-column>
      <el-table-column label="公安备案备案" prop="police"></el-table-column>
      <el-table-column label="操作">
        <!--  slot-scope="scope" 来取得作用域插槽:data绑定的数据 -->
        <template slot-scope="scope">
          <!-- scope.$index：获得行索引值scope.row：获得所在行的数据 -->
          <el-button type="primary" @click="modifyData(scope.$index, scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- visible.sync方法来进行弹窗显示和隐藏的调用 -->
    <el-dialog :visible.sync="centerDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="网站名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="网站域名">
          <el-input v-model="editForm.ip"></el-input>
        </el-form-item>
        <el-form-item label="ICP备案">
          <el-input v-model="editForm.ICP"></el-input>
        </el-form-item>
        <el-form-item label="公安备案备案">
          <el-input v-model="editForm.police"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitEditRow()">确定</el-button>
      </div>
    </el-dialog>
    <el-card>
      <div class="demo-image">
        <div class="block">
          <span class="demonstration">
              <img src="url" alt="">
          </span>
          <el-image
            style="width: 100px; height: 100px"
            :src="url"
            :fit="fit"
          ></el-image>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
/*
_index：是定义的一个全局变量，当保存的时候自动获取修改的那一行的索引，从而将修改后的数据更新到表格中
*/
var _index
export default {
  name: 'HelloWorld',
  data () {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      msg: '',
      centerDialogVisible: false,
      editForm: [],
      tableData: [{
        name: '可乐开发',
        ip: 'muziya.top',
        ICP: '46545231563152',
        police: '闽465456456454'
      },
      {
        name: '开发',
        ip: 'muziya',
        ICP: '465452352',
        police: '闽465456454'
      }
      ]
    }
  },
  methods: {

    /*
     modifyData方法，若用户点击表格某一行中的修改按钮，将会弹出一个修改数据的对话框，
    是否显示对话框是通过参数centerDialogVisible进行设置的，初始值为false
     */
    modifyData (index, row) {
      this.centerDialogVisible = true
      this.editForm = Object.assign({}, row)
      _index = index
      console.log('index的值：' + index)
      console.log('_index的值：' + _index)
      console.log('row的值是：', row)
    },
    sumbitEditRow () {
      var editData = _index
      console.log('editData的值' + this.editForm)
      this.tableData[editData].name = this.editForm.name
      this.tableData[editData].ip = this.editForm.ip
      this.tableData[editData].ICP = this.editForm.ICP
      this.tableData[editData].police = this.editForm.police
      this.centerDialogVisible = false
      console.log('对象数组', this.tableData)
    },
    // 将修改后的数据更新到tableData对象数组，同时将centerDialogVisible的值设置为false，即关闭对话框
    closeDialog () {
      this.centerDialogVisible = false
      console.log('editfrom', this.editForm)
    }
  }
}
</script>
<style scoped>
.demo-image {
  padding-top: 400px;
  display: flex;
  justify-content: center;
}
</style>
